<template>
  <div class="user-edit">
    <Drawer :title="title" v-model="visible" width="600" :mask-closable="false">
      <Scroll :height="height">
        <div>
          <table width="90%" class="gridtable">
            <tr v-for="(item,index) in incomeList" :key="index">
              <td>
                客户名称: {{ item.customer_name }} <br/>
                开户银行: {{ item.bank_name }} <br/>
                银行帐号: {{ item.bank_account }} <br/>
                收入金额: {{ item.income }} <br/>
                交易日期: {{ item.incode_date }} <br/>
                附言: {{ item.content }} <br/>
                添加人: {{ item.real_name }} <br/>
              </td>
              <td>
                <Button @click="handleDelte(index)" style="align: center" type="warning">删除</Button>
              </td>
            </tr>
          </table>
        </div>
        <div>
          <Form ref="bankInfo" :model="bankInfo" :label-width="100" style="width: 90%;font-size: 12px;">
            <FormItem label="对方户名" prop="customer_name" class="margin-bottom-3">
              <Input v-model="bankInfo.customer_name"/>
            </FormItem>
            <FormItem label="对方银行" prop="bank_name" class="margin-bottom-3">
              <Input v-model="bankInfo.bank_name"/>
            </FormItem>
            <FormItem label="对方帐号" prop="bank_account" class="margin-bottom-3">
              <Input v-model="bankInfo.bank_account"/>
            </FormItem>
            <FormItem label="收入金额" prop="income" class="margin-bottom-3">
              <InputNumber v-model="bankInfo.income" style="width: 200px;"/>
            </FormItem>
            <FormItem label="交易日期" prop="incode_date" class="margin-bottom-3">
              <DatePicker :value="bankInfo.incode_date" type="date" format="yyyy-MM-dd"
                placeholder="请选择日期" @on-change="getDate" style="width: 200px"></DatePicker>
            </FormItem>
            <FormItem label="摘要" prop="content" class="margin-bottom-3">
              <Input v-model="bankInfo.content"/>
            </FormItem>
            <Button type="primary" :loading="submitLoading" @click="submit" style="margin: 10px 100px 10px 400px;" >录入</Button>
          </Form>
        </div>
        <div class="demo-drawer-footer">
          <Button @click="handleCancel" style="margin-right: 20px;">关闭</Button>
        </div>
      </Scroll>
    </Drawer>
  </div>
</template>
<script>
import { destroyIncome, getIncome, getBankInfo, insertIncome } from '@/api/contract';
export default {
  name: 'income',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array
    },
    contract_id: {
      type: Number
    }
  },
  data() {
    return {
      visible: this.value,
      title: '合同回款记录',
      height: 540,
      submitLoading: false,
      incomeList: [],
      bankInfo: {}
    }
  },
  methods: {
    init() {
      
    },
    handleCancel() {
      this.visible = false;
    },
    submit() {
      insertIncome(this.bankInfo).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.$Message.success(res.message);
          this.visible = false;
        }
      })
    },

    setCurrentValue(value) {
      this.visible = value;
    },
    handleDelte(index) {
      this.$Modal.confirm({
        title: '确定删除',
        content: '确定要删除这条记录吗？',
        onOk: () => {
          const params = {id: this.incomeList[index].id};
          destroyIncome(params).then(res => {
            if (res.code === 0) {
              this.$Message.success(res.message);
              this.incomeList.splice(index, 1);
            }
          })
        }
      })
    },
    getBank() {
      const params = {project_contract_id: this.contract_id};
      getBankInfo(params).then(res => {
        if (res.code === 0) {
          this.bankInfo = res.data;
        }
      })
    },
    getDate(v) {
      this.bankInfo.incode_date = v;
    },
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    },
    visible(value) {
      this.init();
      if (value) {
        this.getBank();
        this.incomeList = this.data;
      }
      this.$emit("input", value);
    }
  },
  mounted() {
    this.height = Number(document.documentElement.clientHeight - 100);
    
  }
}
</script>
<style lang="less" scoped>
.demo-drawer-footer{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
table.gridtable {
  font-family: verdana, arial, sans-serif;
  font-size: 12px;
  color: #777777;
  border-width: 1px;
  border-color: #777777;
  border-collapse: collapse;
  margin: 10px auto;
}

table.gridtable th {
  border-width: 1px;
  padding: 6px;
  border-style: solid;
  border-color: #aaaaaa;
  background-color: #dedede;
}

table.gridtable td {
  border-width: 1px;
  padding: 4px;
  border-style: solid;
  border-color: #8b8b8b;
  background-color: #ffffff;
}

.margin-bottom-3 {
  margin-bottom: 3px;
}
</style>